﻿<!DOCTYPE html>
<html>
<head>
    <title>The "template" binding</title>
    <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../js/knockout-2.1.0.min.js"></script>
    <script type="text/javascript" src="../js/twitterApi.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/reset.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>
<body>
    <h1>The "template" binding</h1>
    <p>
        The template binding populates the associated DOM element with the results of rendering a template. Templates are a simple and convenient way to build sophisticated UI structures - possibly with repeating or nested blocks - as a function of your view model data.
    </p>
    <div class="buttonholder">
        <img src="../images/metro.icons/white/heart.png" onclick="document.location.href='/'" />
    </div>
    <div>
        <h2>Participants</h2>
        Here are the participants:
        <div data-bind="template: { name: 'person-template', data: buyer }"></div>
        <div data-bind="template: { name: 'person-template', data: seller }"></div>

        <script type="text/html" id="person-template">
            <h3 data-bind="text: name"></h3>
            <p>Credits: <span data-bind="text: credits"></span></p>
        </script>

        <script type="text/javascript">
            function MyViewModel() {
                this.buyer = { name: 'Franklin', credits: 250 };
                this.seller = { name: 'Mario', credits: 5800 };
            }
            ko.applyBindings(new MyViewModel());
        </script>


    </div>
</body>
</html>
